<template>
	<view class="date-list flexR">
		<view class="date-list-main flexR">
			<view v-for="(item,index) in dateList" :key="index" class="date-list-item flexC" @click="clickDate(item)"
				:class="item.active?'active':''">
				<text class="week">{{item.week}}</text>
				<text class="date">{{item.date}}</text>
				<text class="ava" :class="{canAva: canAva[item.time]}">{{canAva[item.time] ? '有号' : '无号'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	var dayjs = require('dayjs')
	import {
		transWeek,
		getValue
	} from '../../common/js/common.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			dateNum: {
				type: Number,
				default: 15
			},
			canAva: {
				type: Object,
				default: () => {}
			},
			
		},
		data() {
			return {
				dateList: [],
				allDate: false,
				defaultAll: false,
				doctorItem: {},
			}
		},
		computed: {
			...mapGetters(['systemParams'])
		},
		created() {
			this.dateList = [{
				week: '当日',
				date: dayjs().format('MM/DD'),
				time: dayjs().format('YYYY-MM-DD'),
				active: false
			}]
			for (let i = 1; i < this.dateNum; i++) {
				this.dateList.push({
					week: transWeek(dayjs().add(i, 'day').day()),
					date: dayjs().add(i, 'day').format('MM/DD'),
					time: dayjs().add(i, 'day').format('YYYY-MM-DD'),
					active: false
				})
			}
		},
		mounted() {
			// 是否默认全部日期
			// this.defaultAll = getValue('QBRQMRCODE', this.systemParams) == 1 ? true : false
			// if (this.defaultAll) {
			// 	this.clickDate({
			// 		time: 'all'
			// 	});
			// } else {
			// 	this.clickDate(this.dateList[0]);
			// }
			this.doctorItem = uni.getStorageSync("doctorItem");
			console.log(this.canAva)
			for (var i = 0; i < this.dateList.length; i++) {
				
				if (this.dateList[i].time == this.doctorItem.schDate) {

					this.clickDate(this.dateList[i]);
					break;
				}
			}
			// 得到医生现在的这条数据是否和当前日期一致，则选中
		},
		methods: {
			clickDate(item) {

				this.dateList.forEach(citem => {
					citem.active = citem.time === item.time ? true : false;
				});
				this.allDate = item.time === 'all' ? true : false;
				let params = {
					startDate: '',
					endDate: ''
				}
				if (item.time !== 'all') {
					params.startDate = item.time
					params.endDate = item.time
				} else if (item.time === 'all') {
					let len = this.dateList.length;
					params.startDate = this.dateList[0].time
					params.endDate = this.dateList[len - 1].time
				}
				this.$emit('change', params);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-list {
		// background-color: $uni-bg-color;
		// padding: 15rpx 0rpx;
		padding-bottom: 24upx;
		font-size: 28rpx;
		height: 160rpx;

		.all-date {
			width: 100rpx;
			height: 140rpx;
			justify-content: center;
			align-items: center;
			background-color: #FFF;
			border-radius: 8rpx;

			&.active {
				background-color: rgba(101, 142, 214, 0.18) !important;
				color: #3E81F7 !important;
			}
		}

		.date-list-main {
			flex: 1;
			overflow: scroll;

			.date-list-item {
				// width: calc((100vw - 160rpx) / 5 - 10rpx);
				flex-shrink: 0;
				width: 108upx;
				height: 130rpx;
				padding-top: 12upx;
				// padding: 0 18rpx;
				margin-left: 10rpx;
				justify-content: center;
				align-items: center;
				background-color: #FFF;
				border-radius: 8rpx;
				overflow: hidden;

				.week {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 44upx;
				}

				.date {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.7);
					line-height: 32upx;
				}

				.ava {
					bottom: 0;
					width: 100%;
					color: rgba(0, 0, 0, 0.4);
					margin-top: auto;
					text-align: center;
					line-height: 46upx;
				}

				.canAva {
					color: #3E81F7;
				}
			}

			& .active {
				// background-color: rgba(101, 142, 214, 0.18) !important;
				background-color: rgb(241, 254, 255);

				.week {
					color: #44cfda;
				}

				.date {
					color: #44cfda;
				}

				.ava {
					// background-color: #3E81F7;
					color: #44cfda;
				}
			}

		}
	}
</style>